﻿<script setup lang="ts" name="WidgetProperty">
const props = defineProps({
  config: { type: Object }
})
const moduleProperty:any = ref(props.config || {})
watch(
  () => props.config,
  (val) => {
    moduleProperty.value = val
  },
  {
    immediate: true,
    deep: true
  }
)
const activeModuleCollapse = ref(['common', 'oneself'])
</script>

<template>
  <div class="tab-content">
    <el-form label-width="auto" label-position="right">
      <el-collapse class="page-designer-collapse" v-model="activeModuleCollapse">
        <el-collapse-item name="common">
          <template #title>
            <h2 class="collapse-title">常见属性</h2>
          </template>
          <div class="config-form">
            <el-form-item label="唯一标识">
              <el-input v-model="moduleProperty.uuid" placeholder="" />
            </el-form-item>
          </div>
        </el-collapse-item>
        <el-collapse-item name="oneself">
          <template #title>
            <h2 class="collapse-title">独立属性</h2>
          </template>
          <div class="config-form">
            <slot />
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.module-select{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  :deep(.el-scrollbar__view){
    padding: var(--el-space);
  }

  :deep(.el-row .el-col .item-description){
    margin: 0 20px 20px;
  }
}
</style>
